import React, { Component, PureComponent } from 'react'

// 类组件
// export default class A extends Component {
//     state = { name: 'tom', age: 28 }

//     change = ()=>{
//         this.setState({ name: 'JOB', age: 38 })
//         // this.setState({})
//     }

//     shouldComponentUpdate(nextProps,nextState){
//         console.log('A---shouldComponentUpdate',nextProps,nextState);
//         // return !(this.state.name === nextState.name)
//         return true
//     }

//     render() {
//         console.log('A组件-render',this.state.name);
//         return (
//             <div>
//                 <h2>我是A组件</h2>
//                 <h4>我的用户名是：{this.state.name}</h4>
//                 <button onClick={this.change}>点击切换用户</button>
//                 {/* <B age={this.state.age}></B> */}
//                 <B age="99"></B>
//             </div>
//         )
//     }
// }
// class B extends Component {
//     shouldComponentUpdate(nextProps,nextState){
//         console.log('B---shouldComponentUpdate',nextProps,nextState);
//         return !(this.props.age === nextProps.age)
//     }

//     render() {
//         console.log('B组件-render',this.props.age);
//         return (
//             <div>
//                 <hr />
//                 <h2>我是B组件---年龄为：{this.props.age}</h2>
//             </div>
//         )
//     }
// }







// 类组件
export default class A extends PureComponent {
    state = { name: 'tom', age: 28,stus:['吃','喝','嫖'] }

    change = ()=>{
        this.setState({ name: 'JOB', age: 38 })
        // this.setState({})

        /* 赋值给obj：是引用地址的传递，PureComponent不会进行render */
        // const obj = this.state
        // obj.name = '卡拉米'
        // console.log(obj === this.state);
        // this.setState(obj)
    }
    addStu = ()=>{
        const {stus} = this.state

        /* 无效 */
        // stus.unshift('赌')
        // this.setState({stus})

        this.setState({stus:['堵',...stus]})
    }

    render() {
        console.log('A组件-render',this.state.name);
        return (
            <div>
                <h2>我是A组件</h2>
                <h4>我的用户名是：{this.state.name}</h4>
                <h4>数组：{this.state.stus}</h4>
                <button onClick={this.change}>点击切换用户</button>
                <button onClick={this.addStu}>往数组添加一个新属性</button>
                {/* <B age={this.state.age}></B> */}
                <B age="99"></B>
            </div>
        )
    }
}
class B extends PureComponent {

    render() {
        console.log('B组件-render',this.props.age);
        return (
            <div>
                <hr />
                <h2>我是B组件---年龄为：{this.props.age}</h2>
            </div>
        )
    }
}
